<template>
  <div class="employee-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="title">{{ storeName }} - 员工管理</span>
          <el-button type="primary" @click="router.back()">
            <el-icon><ArrowLeft /></el-icon>
            返回店铺管理
          </el-button>
        </div>
      </template>

      <div class="employee-section">
        <h3>摄影师（{{ photographerData.length }}人）</h3>
        <el-table
          v-loading="loading"
          :data="photographerData"
          style="width: 100%"
          border
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="nickname" label="昵称" min-width="120" />
          <el-table-column prop="roleName" label="角色" width="120" />
          <el-table-column label="头像" width="100">
            <template #default="{ row }">
              <el-avatar :size="40" :src="row.avatarUrl" @error="() => true">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="接单数" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === '1' ? 'success' : 'info'">
                {{ row.status === "1" ? "在线" : "离线" }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="employee-section">
        <h3>化妆师（{{ makeupArtistData.length }}人）</h3>
        <el-table
          v-loading="loading"
          :data="makeupArtistData"
          style="width: 100%"
          border
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="nickname" label="昵称" min-width="120" />
          <el-table-column prop="roleName" label="角色" width="120" />
          <el-table-column label="头像" width="100">
            <template #default="{ row }">
              <el-avatar :size="40" :src="row.avatarUrl" @error="() => true">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="接单数" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === '1' ? 'success' : 'info'">
                {{ row.status === "1" ? "在线" : "离线" }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";
import { getStoreEmployees } from "@/api/store";

interface Employee {
  id: string;
  roleName: string;
  nickname: string;
  status: string | null;
  avatarUrl: string;
  count: string;
}

interface StoreEmployees {
  photographers: Employee[];
  makeupArtists: Employee[];
}

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const photographerData = ref<Employee[]>([]);
const makeupArtistData = ref<Employee[]>([]);
const storeId = route.query.storeId as string;
const storeName = route.query.storeName as string;

const getEmployeeList = async () => {
  try {
    loading.value = true;
    const res = await getStoreEmployees(storeId);
    const employeeData: StoreEmployees = res.data;
    photographerData.value = employeeData.photographers;
    makeupArtistData.value = employeeData.makeupArtists;
  } catch (error: any) {
    console.error("获取员工信息失败:", error?.message || error);
    ElMessage.error(error?.message || "获取员工信息失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getEmployeeList();
});
</script>

<style lang="scss" scoped>
.employee-container {
  padding: 20px;

  .box-card {
    width: 100%;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 18px;
      font-weight: bold;
    }

    .el-button {
      .el-icon {
        margin-right: 4px;
      }
    }
  }

  .employee-section {
    margin-bottom: 30px;

    &:last-child {
      margin-bottom: 0;
    }

    h3 {
      margin: 0 0 16px;
      font-size: 16px;
      color: #303133;
    }
  }
}
</style>
